<template>
	<view class="mainCon">
		<view class="headForm">
			<u-form :model="formData" ref="uForm" label-width="160">
				<u-form-item label="车架号">
					<u-button  :custom-style="customStyle" @click="qcrClick">{{ text }}</u-button>
				</u-form-item>
			</u-form> 
			<view class="btnGroup">
				<u-button :custom-style="customStyle" type="primary" @click="onSearch">查询</u-button>  
			</view>
		</view>
		<view style="height: 180rpx;"></view>
			
		<view class="orderList">
				<view class="orderItem" v-for="(item,index) in orderList">
					<view class="orderInfo">
						<view class="infoCell">
							<view class="labelName">
								车架号 : 
							</view>
							<view class="infoCon">
								{{ item.carframeno }}
							</view>
						</view>
						<view class="infoCell">
							<view class="labelName">
								运输车号 : 
							</view>
							<view class="infoCon">
								{{ item.carcode }}
							</view>
						</view>
						<view class="infoCell">
							<view class="labelName">
								物流公司 : 
							</view>
							<view class="infoCon">
								{{ item.truckname  }}
							</view>
						</view>
						<view class="infoCell">
							<view class="labelName">
								司机姓名 : 
							</view>
							<view class="infoCon">
								{{ item.drivername }}
							</view>
						</view>
						<view class="infoCell">
							<view class="labelName">
								司机电话 : 
							</view>
							<view class="infoCon">
								{{ item.drivertel }}
							</view>
						</view>
						<view class="infoCell">
							<view class="labelName">
								是否残损 : 
							</view>
							<view class="infoCon">
								{{ item.isdamaged == 0 ? '否' : '是' }}
							</view>
						</view>
						
						<view style="display: flex; justify-content: center; margin-top: 8px;">
							<view class="btn" type="primary" @click="toThroughSW(item)">确认进港</view>
						</view>
						
					</view>
				</view>
			</view>
			<u-popup v-model="showInfo" width="100%" height="100%" :closeable="true">
				<view style="margin: 15px;">
					<view style="text-align: center;font-size: 20px;
							font-weight: 700;">
						详细信息
					</view>
					<view class="content">
						<u-form :model="form" ref="uForm" label-width="100px">
										<u-form-item label="* 运输车号:" prop="carcode">
											<u-input v-model="form.carcode" placeholder="请输入运输车号"/>
										</u-form-item>
										
										<u-form-item label="* 物流公司:" prop="truckname">
											<u-input v-model="form.truckname" placeholder="请输入物流公司"/>
										</u-form-item>
										
										<u-form-item label="* 司机姓名:" prop="drivername">
											<u-input v-model="form.drivername" placeholder="请输入司机姓名"/>
										</u-form-item>
										
										<u-form-item label="* 司机电话:" prop="drivertel">
											<u-input v-model="form.drivertel" placeholder="请输入司机电话"/>
										</u-form-item>
						
								
										<u-form-item label="流向:" prop="cargoflowto">
											<u-input v-model="form.cargoflowto" placeholder="请输入流向"/>
										</u-form-item>
										
										<u-form-item label="车型" prop="brand">
											<u-input v-model="form.brand" placeholder="请输入车型"/>
										</u-form-item>
										
										<u-form-item label="颜色" prop="color">
											<u-input v-model="form.color" placeholder="请输入颜色"/>
										</u-form-item>
										
										<u-form-item label="工具数量" prop="toolnum">
											<u-input v-model="form.toolnum" placeholder="请输入工具数量"/>
										</u-form-item>
										
										<u-form-item label="备胎" prop="sparewheelnum">
											<u-input v-model="form.sparewheelnum" placeholder="请输入备胎"/>
										</u-form-item>
										
										<u-form-item label="钥匙" prop="keynum">
											<u-input v-model="form.keynum" placeholder="请输入钥匙"/>
										</u-form-item>
										
										<u-form-item label="是否残损" prop="isdamaged">
						<!-- 					<u-input v-model="form.isdamaged" placeholder="是否残损"/> -->
											<u-input  type="select" :select-open="partListShow" v-model="form.isdamagedName"
											placeholder="是否残损" @click="partListShow = true"/>
										</u-form-item>
										
										<u-form-item label="备注" prop="memo">
											<u-input v-model="form.memo" placeholder="请输入备注"/>
										</u-form-item>
										<u-form-item label="上传图片">
											<u-upload ref="uUpload5" max-count="20" :action="action" @on-success="handleSuccess5" :auto-upload="true" ></u-upload>
										</u-form-item>
										<view style="display: flex; justify-content: center;margin-top: 8px;">
											<u-button shape="square" type="success" 
											:custom-style="customStyle" @click="submit"
											style="margin-right: 10px;">确认进港</u-button>
											<u-button shape="square" type="primary" :custom-style="customStyle" @click="showInfo = false">关闭</u-button>
										</view>
									</u-form>
						
					</view>
				</view>
			</u-popup>
			<u-select mode="single-column" :list="partList" v-model="partListShow" @confirm="partListConfirm"
				value-name="value" label-name="name">
			</u-select>
			<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				picIdList: [],
				orderList: [],
				formData: {},
				customStyle: {
					height: '60rpx',
				}, 
				action: 'https://api.zlkj-port.com/DF-JG/App/fileUpload',
				text: '点击扫描车架号',
				showInfo: false,
				form: {},
				partListShow: false,
				partList: [
					{ value: 0, name: '否' },
					{ value: 1, name: '是'  },
				],
				rules: {
					carcode: [ { required: true, message: '运输车号不能为空' } ],
					truckname: [ { required: true, message: '物流公司不能为空' } ],
					drivername: [ { required: true, message: '司机姓名不能为空' } ],
					drivertel: [ { required: true, message: '司机电话不能为空' } ],
					carframeno: [ { required: true, message: '车架号不能为空' } ],
				},
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
			console.log(this.userInfo.nickName)
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			handleSuccess5(response) {
				console.log(response)
				this.picIdList.push(response.id)
				console.log(this.picIdList)
			}, 
			qcrClick() {
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						console.log('扫描二维码成功,结果:' + res.result)
						if (res.result) {
							this.formData.carframeno = res.result
							this.text = res.result
						}
					},
					error: (res) => {
						console.log('扫描二维码出现错误')
					}
				})
			},
			onSearch() {
				if(!this.formData.carframeno) {
					this.$refs.uTips.show({
						title: '车架号不能为空',
						type: 'warning',
						duration: '2500'
					})
					return
				}
				uni.request({
					url: 'https://api.zlkj-port.com/DF-JG/xhtt/Q/nSfM4O2j2FoMh0P?carframeno=' + this.formData.carframeno,
					method: 'get',
					success: (res) => {
						this.orderList = res.data.rows
						this.$refs.uTips.show({
							title: '搜索成功!',
							type: 'success',
							duration: '2500'
						})
					}
				})
			},
			toThroughSW(item) {
				this.form = item
				if(this.form.isdamaged == 0) {
					this.form.isdamagedName = '否'
				} else if (this.form.isdamaged == 1) {
					this.form.isdamagedName = '是'
				}
				this.showInfo = true
			},
			partListConfirm(val) {
				console.log(val)
				this.form.isdamagedName = val[0].label
				this.form.isdamaged = val[0].value
				console.log(this.form.isdamaged)
			},	
			submit() {
				this.$refs.uForm.validate(valid => {
					if(valid) {	
						uni.request({
							url: 'https://api.zlkj-port.com/DF-JG/xhtt/U/cGzEkXbGRzD0OGa' +
								'?carcode=' + this.form.carcode +
								'&truckname=' + this.form.truckname +
								'&driverhame=' + this.form.driverhame +
								'&drivertel=' + this.form.drivertel +
								'&cargoflowto=' + this.form.cargoflowto +
								'&carframeno=' + this.form.carframeno +
								'&brand=' + this.form.brand +
								'&color=' + this.form.color +
								'&toolnum=' + this.form.toolnum +
								'&sparewheelnum=' + this.form.sparewheelnum +
								'&keynum=' + this.form.keynum +
								'&isdamaged=' + this.form.keynum +
								'&memo=' + this.form.memo +
								'&inoutuser=' + this.userInfo.nickName +
								'&id=' + this.form.id +
								'&fileids=' + this.picIdList.toString(),
							method: 'get',
							success: (res) => {
								this.$refs.uTips.show({
									title: '修改成功！',
									type: 'success',
									duration: '2500'
								})
								this.$nextTick(() => {
									// 清空图片
									this.$refs.uUpload5.clear()
									this.picIdList = []
								})
								uni.request({
									url: 'https://api.zlkj-port.com/DF-JG/xhtt/Q/nSfM4O2j2FoMh0P?carframeno=' + this.form.carframeno,
									method: 'get',
									success: (res) => {
										this.orderList = res.data.rows
									}
								})
								this.showInfo = false
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F1F9;
	}
	::v-deep .u-form-item__body {
		background-color: rgba(255, 255, 255, 1);
		margin: 0px 10rpx;
		border-radius: 20rpx;
	}
	::v-deep .u-form-item {
		padding: 15rpx !important;
	}

	.btn {
		background-color: rgb(25, 190, 107); 
		color: #fff; 
		width: 150rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		border-radius: 5px;
		margin-left: 10px;
	}
	.headForm {
		padding: 10rpx;
	}
	.headForm {
		padding: 20rpx;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10;
		background-color: #FFFFFF;
	
		.btnGroup {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 15rpx;
		}
	}
	
	.mainCon {
		.tabHead {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			padding: 20rpx;
			position: fixed;
			top: 0;
			width: 100%;
			// background-color: #FFFFFF;
	
			.tabItem {
				width: 160rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				text-align: center;
				border: 1rpx solid #1A75FF;
				color: #868887;
				font-size: 26rpx;
			}
	
			.active {
				background-color: #1A75FF;
				color: #FFFFFF;
			}
		}
	
		.orderList {
			width: 700rpx;
			margin: 20rpx auto;
			margin-top: 100rpx;
			.orderItem {
				background-color: #FFFFFF;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
	
				.orderHead {
					.headcell {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;
	
						.leftCon {
							display: flex;
							align-items: center;
	
							.labelTag {
								background-color: #E0EDFB;
								color: #4C86E7;
								width: 150rpx;
								line-height: 50rpx;
								border-radius: 25rpx;
								font-size: 26rpx;
								text-align: center;
								margin-right: 15rpx;
							}
						}
	
						.status1 {
							color: #4C86E7;
							font-size: 26rpx;
						}
	
						.dateLabel {
							color: #858585;
						}
	
						.status2 {
							color: #E94340;
							font-size: 30rpx;
						}
					}
				}
	
				.orderInfo {
					// margin-top: 20rpx;
					// border-top: 1rpx dashed #C1C3C2;
					padding-top: 20rpx;
	
					.infoCell {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;
	
						.labelTag {
							background-color: #E0EDFB;
							color: #4C86E7;
							width: 150rpx;
							line-height: 50rpx;
							border-radius: 25rpx;
							font-size: 26rpx;
							text-align: center;
							margin-right: 15rpx;
						}
	
						.labelName {
							color: #858585;
							font-size: 28rpx;
							margin-right: 50rpx;
							width: 195rpx;
						}
	
						.infoCon {
							color: #87888A;
						}
					}
				}
	
				.bottomActions {
					margin-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
	
					.delete {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}
	
					.confirm {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}
				}
			}
		}
	}
</style>
